<template>
  <el-container style="height: 100%">
    <el-main>
      <el-form
        ref="form"
        :inline-message="false"
        :status-icon="true"
        :model="formData"
        label-width="120px"
        size="large"
        :hide-required-asterisk="true"
        class="ser-form ope-form"
        :v-loading="loading"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="资源名称：">
              <div class="expand-val">
                <span  >{{ formData.resourceName||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="文件协议类型：">
              <div class="expand-val">
                <span  >{{formData.typeId|DictionaryCodeToName('filetype')}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="IP地址：">
              <div class="expand-val">
                <span  >{{ formData.ip||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="端口：">
              <div class="expand-val">
                <span  >{{ formData.port||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="路径：">
              <div class="expand-val">
                <span  >{{ formData.fileDir||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名：" prop="username">
              <div class="expand-val">
                <span  >{{ formData.username||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="主被动模式：" prop="activeAndPassiveMode">
              <div class="expand-val">
                <span  >{{ formData.activeAndPassiveMode|DictionaryCodeToName('mode')}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="编码：" prop="unicodeId">
              <div class="expand-val">
                <span  >{{ formData.unicodeId|DictionaryCodeToName('unicode')}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="联系人:" >
              <div class="expand-val">
                <span >{{ formData.manager||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="联系方式:">
              <div class="expand-val">
                <span >{{ formData.phone||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="备注：" label-width="120px" class="remark">
              <div class="expand-val" style="width: 120pxs">
                <span  >{{ formData.remark||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button size="medium" @click="onBack()">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>

  </el-container>
</template>
<script>

export default {
  name: 'ftpconfig',
  data() {
    return {
      formData: {
        resourceName: '',
        ip: '',
        fileDir: '',
        typeId: '',
        activeAndPassiveMode: '',
        phone: '',
        manager: '',
        remark: '',
        unicodeId: ''
      },
      saveLoading: false,
      testLoading: false,
      loading: false
    }
  },
  props: {
    params: {
      type: Object,
      default: {
      }
    }
  },
  methods: {
    // 返回
    onBack() {

      this.$emit('changeComponent', {
        active: 'ftpresource'
      })
    },
    loadData() {
      if (this.params.resourceId) {
        this.loading = true;
        this.$api.resourcemanage.getById(this.params.resourceId).then(res => {
          const result = res.data;
          if (result.code === 200) {
            let data = result.data;
            for (let key in data) {
              if (data.hasOwnProperty(key)) {
                this.formData[key] = data[key];
              }
            }
          }
          this.loading = false;
        }).catch((e) => {
          this.loading = false;
        })
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.loadData();
    })
  },
  beforeDestroy() {
    this.$refs.form.resetFields();
  }
}
</script>
<style  scoped>
.expand-val span {
  display: inline-block;
  width: 900px;
  word-wrap: break-word;
}
</style>
